<template>
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>

    <p>{{ count }}</p>
    <button @click="modify">修改count</button>

    <p>{{ user.age }}</p>
    <p>{{ ageRef }}</p>
    <button @click="ageRef++">修改ageRef</button>

    <p>{{ user.name }}</p>
    <p>{{ name }}</p>
    <button @click="name='zhangsan'">修改name</button>

    <p>{{ doubleCount }}</p>
</template>

<script setup>
import { toRefs } from 'vue';
import { watch } from 'vue';
import { computed } from 'vue';
import { toRef } from 'vue';
import { reactive, ref }  from 'vue'

    /**
     * reactive用法
     */
    // 普通对象不具有响应式
    // const user = {
    //     name: 'tom',
    //     age: 21
    // }
    // 创建一个响应式对象，是一个代理对象
    const user = reactive({
        name: 'tom',
        age: 21
    })
    console.log(user)

    var change = () => {
        user.name = 'jerry'
        // console.log(user.name)
    }

    /**
     * ref用法
     */
    // 创建一个响应式对象
    let count = ref(1) // 返回 {value: 1}

    const modify = () => {
        count.value++
        console.log(count.value)
    }


    /**
     * toRef
     */
    const ageRef = toRef(user, 'age')

    /**
     * toRefs
     */
    const userRef = toRefs(user)
    // console.log(userRef.name)
    // console.log(userRef.age)
    const {name,age} = userRef


    /**
     * computed
     */
    const doubleCount = computed(() =>  count.value * 2)

    /**
     * watch
     */
    watch(user, (newValue) => {
        console.log(newValue)
    })

</script>

<style scoped>

</style>